<template>
    <div>
        <dl v-for="item in categoryList" :key="item.id">
            <dt><h3>{{item.name}}</h3></dt>
            <dd>
                <div v-for='val in item.goodsList' :key="val.id" @click="gotoShop(val.id)">
                    <img :src="val.list_pic_url" :v-lazy="val.list_pic_url" >      
                    <p>{{val.name}}</p>
                    <span>{{val.retail_price|Rmb}}</span>
                </div>
            </dd>
        </dl>
    </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    props:['categoryList'],
    methods:{
        gotoShop(id){
        this.$router.push({path:'/detail',query:{id:id}})
        }
  }
}
</script>

<style scoped lang='less'>
    h3{
        text-align: center;
        margin: 20px;
    }
    dd{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px;
        div{
            text-align: center;
            width: 49%;
            img{
                width: 100%;
            }
            p{
                font-size: 18px;
            }
            span{
                font-size: 15px;
                color: red;
            }
        }
    }
</style>